<!-- 机票列表页面 -->
<template>
    <section class="contianer">
        <el-row  type="flex" justify="space-between">

            <!-- 顶部过滤列表 -->
            <div class="flights-content">
                <!-- 过滤条件 -->
                <div>
                    
                </div>
                
                <!-- 航班头部布局 -->
                <div>
                     <FlightsListHead></FlightsListHead>
                </div>
                
                
                <!-- 航班信息 -->
                <div>
                    <!-- 因为航班信息我们是封装在一个组件中显示的，
                    因此需要把显示的数据传递到封装的组件中才能使用并显示
                    父子关系：当一个组件嵌套使用在另一个组件内的时候，
                    则表示他们存在父子关系，被嵌套的那个组件叫子组件，反之叫父组件

                    问题：如何把数据传递个封装的组件呢
                    答：可以利用父传子技术实现
                实现方式：
                    第一步：父组件在子组件标签自定义一个属性并把要传递的数据赋值给它
                    第二步：子组件中，通过props属性声明第一步自定义的属性名来接受数据 -->
                    <FlightsItem :data="item" 
                    v-for="item in renderData" 
                    :key="item.id">
                    </FlightsItem>   

                    <!-- 分页器 -->
                    <el-row type="flex" justify="center">
                      <el-pagination 
                      layout="prev,paper,next"
                      :page-size="pageSize"
                      :total="flightsData.total"
                      @current-change="currentChange">
                    </el-pagination>
                    </el-row>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="aside">
                <!-- 侧边栏组件 -->
            </div>
        </el-row>
    </section>
</template>

<script>
import FlightsListHead from "@/components/air/flightsListHead.vue"
import FlightsItem from "@/components/air/flightsItem.vue"
export default {
    components:{FlightsListHead,FlightsItem},
    data(){
        return {
            flightsData:{
                flights:{},//机票列表信息
                info:{},   //当前的机票基本信息
                options:{},//机票机场时间等等
            },
            renderData:[],
            pageIndex:1,
            pageSize:5,
        }
    },
    mounted(){
        //获取地址栏中的参数值this.$route.query
        //console.log(this.$route.query)
        this.getAirList()
    },
    methods:{

        getRenderData(){
            let start = (this.pageIndex - 1)*5
            let end = this.pageSize*this.pageIndex
            this.renderData = this.flightsData.flights.slice(start,end)
        },

        currentChange(page){
            this.pageIndex = page
            this.getRenderData()
        },


        //获取机票列表数据
        getAirList(){
            this.$axios({
                url:'/airs',
                params: this.$route.query
            }).then(res=>{
                //onsole.log(60,res)
                this.flightsData=res.data
                this.getRenderData()
            })
        }
    }

}
    
</script>

<style scoped lang="less">
    .contianer{
        width:1000px;
        margin:20px auto;
    }

    .flights-content{
        width:745px;
        font-size:14px;
    }

    .aside{
        width:240px;
    } 
</style>
